import useToast from '@/utils/toast';
import React, { useState } from 'react';
import './fill.less';
export default function Fill({ data }: IProps) {
  // 输入答案的数据
  const [answer, setAnswer] = useState('');
  // 是否显示答案
  const [showanswers, setShowAnswers] = useState(false);
  // console.log(data);
  let type = data.questionType;
  let toast = useToast();
  const TypeMap: ITypeMap = {
    qa: '问答',
    fill: '填空',
    code: '编程',
  };
  // 确定点击事件
  const btnClick = () => {
    if (answer.trim().length === 0) {
      toast('warning', '请输入答案');
      return;
    }
    setShowAnswers(true);
  };
  return (
    <div className="fill">
      <section className="title">
        <span>{TypeMap[type]}</span>
        <div className="tit">{data.title}</div>
      </section>
      {/* react里面书写处理html的格式，相当于vue的v-html */}
      <div dangerouslySetInnerHTML={{ __html: data.content }}></div>
      <section>
        <textarea
          className="ipt"
          placeholder="请输入答案"
          value={answer}
          onChange={(e) => {
            setAnswer(e.target.value);
          }}
        />
      </section>
      <section style={{ display: showanswers ? 'block' : 'none' }}>
        <p>参考答案：</p>
        <div
          className="answers"
          dangerouslySetInnerHTML={{ __html: data.answer }}
        />
      </section>
      <div className="btn" onClick={btnClick}>
        确定
      </div>
    </div>
  );
}
